<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Home</title>
  <meta name="description" content="">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <meta name="robots" content="all,follow">
  <!-- Bootstrap CSS-->
  <link rel="stylesheet" href="/vendor/bootstrap/css/bootstrap.min.css">
  <!-- Font Awesome CSS-->
  <link rel="stylesheet" href="/vendor/font-awesome/css/font-awesome.min.css">
  <!-- Fontastic Custom icon font-->
  <link rel="stylesheet" href="/css/fontastic.css">
  <!-- Google fonts - Poppins -->
  <link rel="stylesheet" href="/https://fonts.googleapis.com/css?family=Poppins:300,400,700">
  <!-- theme stylesheet-->
  <link rel="stylesheet" href="/css/style.default.css" id="theme-stylesheet">
  <!-- Custom stylesheet - for your changes-->
  <link rel="stylesheet" href="/css/custom.css">
  <!-- Favicon-->
  <link rel="shortcut icon" href="/images/favicon.ico">
  <!-- Tweaks for older IEs--><!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script><![endif]-->

  <!-- JavaScript files-->
  <!-- laydate-->
  <script src="/vendor/layDate/laydate.js"></script>
  <script src="/vendor/jquery/jquery.min.js"></script>
  <script src="/vendor/popper.js/umd/popper.min.js"> </script>
  <script src="/vendor/bootstrap/js/bootstrap.min.js"></script>
  <script src="/vendor/jquery.cookie/jquery.cookie.js"> </script>
  <script src="/vendor/chart.js/Chart.min.js"></script>
  <script src="/vendor/jquery-validation/jquery.validate.min.js"></script>
  <script src="/js/back-index.js"></script>
  <!-- Main File-->
  <script src="js/front.js"></script>

  <!-- 公共header js -->
  <script th:include="commons::header_js"> </script>
</head>
<body>
<div class="page">
  <!-- Main Navbar-->
  <header th:include="commons::common_header"></header>

  <div class="page-content d-flex align-items-stretch">
    <!-- 在commons里面，sidebar -->
    <nav th:include="commons::common_sidebar" class="side-navbar"></nav>

    <div class="content-inner">
      <!-- Page Header-->
      <header class="page-header">
        <div class="container-fluid">
          <h2 class="no-margin-bottom">Home</h2>
        </div>
      </header>
      <!-- 个人操作区域 -->
      <!-- ......... -->
      <!-- Dashboard Counts Section-->
      <section class="dashboard-counts no-padding-bottom">
        <div class="container-fluid">
          <!-- 日期选择-->
          <a class="btn btn-outline-primary" id="changeDayBtn">选择日期</a>
          <input type="hidden" id="today">
          <br><br>
          <strong class="text-violet" id="today_time" style="font-size: x-large"></strong><strong class="text-violet" style="font-size: x-large">房间情况</strong>
          <div id="rooms_stock">

          </div>
        </div>
      </section>

      <!-- model -->
      <div class="modal fade" id="new_reservations_modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true" th:include="commons::reservation_modal">

      </div>
      <!-- Page Footer-->
      <footer class="main-footer" th:include="commons::common_footer"></footer>
    </div>
  </div>
</div>

<!-- 预定模态框 -->
<div class="modal fade" id="order_info">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- 模态框头部 -->
      <div class="modal-header">
        <h5 class="modal-title">房间预定</h5>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- 模态框主体 -->
      <div class="modal-body">
        <input id="room_type_id" type="hidden" value="">
        <form>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">房间类型</span>
            </div>
            <input type="text" disabled="disabled"  id="book_type" placeholder="" class="form-control" >
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">姓名</span>
            </div>
            <input type="text"  id="user_name" placeholder="姓名" class="form-control" >
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">手机号</span>
            </div>
            <input id="user_phone" type="text" placeholder="手机号" class="form-control" >
          </div>
          <div class="input-group mb-3">
            <div class="input-group-prepend">
              <span class="input-group-text">预定时间</span>
            </div>
            <input id="book_time" type="text" placeholder="~" class="form-control" >
          </div>
        </form>
      </div>

      <!-- 模态框底部 -->
      <div class="modal-footer">
        <button id="order_commit" type="button" class="btn btn-secondary" data-dismiss="modal">预定</button>
      </div>

    </div>
  </div>
</div>
</body>
</html>